<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<th:block th:include="include/src :: grid_base_js_and_css"/>
	
	<!-- layui-soul-table -->
	<link rel="stylesheet" href="/static/plugins/layui/extends/soulTable/css/soulTable.css" media="all"/>
	
	<style>
	html {height: 100vh;background-color: #ffffff;}
	body {height: 100vh;}
	</style>
</head>
<body>
<!-- 按钮名称 -->
<script type="text/html" id="templet_script_name">
<input type="text" class="layui-input ys-input-table" name="name" value="{{d.name}}" lay-skin="input" lay-filter="_input_filter_text_on_table" lay-event="_event_text_change_on_table">
</script>
<!-- 按钮事件 -->
<script type="text/html" id="templet_script_event">
<input type="text" class="layui-input ys-input-table" name="event" value="{{d.event}}" lay-skin="input" lay-filter="_input_filter_text_on_table" lay-event="_event_text_change_on_table">
</script>
<!-- 按钮图标 -->
<script type="text/html" id="templet_script_icon">
<input type="text" class="layui-input ys-input-table" name="icon" value="{{d.icon}}" lay-skin="input" lay-filter="_input_filter_text_on_table" lay-event="_event_text_change_on_table">
</script>
<!-- 操作 -->
<script type="text/html" id="templet_script_23">
<a class="layui-btn layui-btn-xs layui-btn-danger" onclick="doDeleteOnTable('/api/inter/ysButtonItem/deleteTrue?id={{d.id}}');">
<i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

	<div class="display_flex" style="height: 100%;" id="id_panel_content">
	</div>
	
	<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="_10366_event-add-row"><i class="iconfont icon-add-btn"></i>添加下拉按钮</a>
	</div>
	</script>
	
	<script th:inline="javascript">
	var cols = [
	            [
	             {
	                 "title": "",
	                 "type": "checkbox",
	                 "fixed": "left",
	                 "unresize": true,
	                 "width": "40",
	                 "colGroup": false
	             },
	             {
	                 "title": "序号",
	                 "fixed": "left",
	                 "unresize": true,
	                 "width": "50",
	                 "align": "center",
	                 "type": "numbers"
	             },
	             {
	                 "title": "所属按钮ID",
	                 "field": "pid",
	                 "fixed": "left",
	                 "width": "120",
	                 "align": "center",
	                 "sort": true,
	                 "type": "normal"
	             },
	             {
	                 "title": "按钮名称",
	                 "field": "name",
	                 "fixed": "left",
	                 "width": "160",
	                 "align": "center",
	                 "sort": true,
	                 "type": "normal",
	                 "templet": '#templet_script_name'
	             },
	             {
	                 "title": "按钮事件",
	                 "field": "event",
	                 "fixed": "left",
	                 "width": "200",
	                 "align": "center",
	                 "sort": true,
	                 "type": "normal",
	                 "templet": '#templet_script_event'
	             },
	             {
	                 "title": "按钮图标",
	                 "field": "icon",
	                 "width": "120",
	                 "align": "center",
	                 "sort": true,
	                 "type": "normal",
	                 "templet": '#templet_script_icon'
	             },
	             {
	                 "title": "操作",
	                 "field": "ope",
	                 "fixed": "right",
	                 "width": "300",
	                 "align": "center",
	                 "sort": true,
	                 "type": "normal",
	                 "templet": "#templet_script_23"
	             }
	         ]
	     ];
	// 搜索表单初始化
	var gridObj = null;
	//使用layui的模块
	layui.config({
		//自定义layui组件的目录,设定扩展的layui模块的所在目录，一般用于外部模块扩展
		base: '/static/js/layui_extends/'
	}).use(['form', 'jquery', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate', 'YsGridOfMainTable', 'YsModal'], function(){
		var $ = layui.jquery;
		var dropdown = layui.dropdown;
		var element = layui.element;
		var form = layui.form;
		var laydate = layui.laydate;
		var table = layui.table;
		var util = layui.util;
		var YsGridOfMainTable = layui.YsGridOfMainTable;
		gridObj = YsGridOfMainTable.init({
			id_panel_content: 'id_panel_content',
			conditions: [],
			menuId: [(${pid})], // 菜单ID
			templateType: 'normal_list', // 模板类型，见ENUM
			pathGridRequest: '/api/inter/ysButtonItem/search?pid=[(${pid})]', // 表格数据请求地址
			pathGridEditRequest: '/api/inter/common/editOnTable?menuId=10366', // 表格上编辑提交地址
			cols: cols,
			sortType: 5
		});
	});
	
	// 在表格上修改
	function doEditOnTable(dataCommit) {
		var indexOfLoading = layer.load(1, {
			shade: [0.5,'#000000'] //0.1透明度的白色背景
		});
		$.post('/api/inter/common/editOnTable?menuId=[(${id})]', dataCommit, function(res){
			if (res.code == 0) {
				layer.msg(res.msg);
				layer.close(indexOfLoading);
			} else {
				layer.close(indexOfLoading);
				layer.msg(res.msg);
			}
		});
	}
	
	// 调整鼠标移动到每行数据时的样式
	$('body').on("mouseenter",".layui-table-body tr",function () {
	    $(this).siblings().find("div").css("color","#142A48");
	    $(this).find("div").css("color","#4DA1FF");
	})
	</script>
</body>
</html>